<template>
	<div class="tuijian-gedan-box">
		<div class="jingxuan" v-for="(item, index) in pageData" >
			<view style="padding: 0 14rpx;">
				<div class="jingxuan-title" v-if="item.showType == 'HOMEPAGE_SLIDE_SONGLIST_ALIGN'">
					<h5 class="title">{{item.uiElement.subTitle.title }}</h5>
					<a class="more" @click="goGeDanGround">查看更多</a>
				</div>
				<div class="jingxuan-title" v-if="item.showType == 'HOMEPAGE_SLIDE_PLAYLIST'">
					<h5 class="title">{{item.uiElement.subTitle.title }}</h5>
					<a class="more" @click="goGeDanGround">查看更多</a>
				</div>
				<scroll-view class="jingxuan-content" :scroll-x="true" v-if="item.showType == 'HOMEPAGE_SLIDE_PLAYLIST'">
					<view class="item" v-for="item2 in item.creatives" :key="item2.creativeId" @click="goGeDanDetail(item2.resources[0])">
						<div class="xiex-image">
							<xiex-image  :src="item2.uiElement.image.imageUrl"></xiex-image>
						</div>
						<p class="describe">{{item2.uiElement.mainTitle.title}}</p>
					</view>
				</scroll-view>
				<swiper class="jingxuan2-content" v-if="item.showType == 'HOMEPAGE_SLIDE_SONGLIST_ALIGN'">
					<swiper-item class="item" v-for="(item2, index) in item.creatives" :key="index" >
						<view v-for="item3 in item2.resources" class="item2" @click="play(item3)" :key="item.id">	
							<div class="xiex-image">
								<xiex-image  :src="item3.uiElement.image.imageUrl"></xiex-image>
							</div>
							<p>{{item3.resourceExtInfo.songData.name}}</p>
							<view class="name"><span v-for="item4 in item3.resourceExtInfo.artists" class="name2">{{item4.name}}</span></view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<div style="height: 10rpx; background-color: #f1f1f1; margin-top: 10rpx; " v-if="item.showType == 'HOMEPAGE_SLIDE_PLAYLIST'">
				
			</div>
			<div style="height: 10rpx; background-color: #f1f1f1; margin-top: 10rpx; " v-if="item.showType =='HOMEPAGE_SLIDE_SONGLIST_ALIGN'">
				
			</div>
			
		</div>
		
	</div>
</template>

<script>
	export default {		
		data() {
			return {
				nowSong: {}
			};
		},
		props:{
			pageData: {
				type: Array,
				default(){
					return []
				}
			}
		},
		methods:{
			goGeDanGround(){
				 uni.navigateTo({
				 	url: '../../../pages/other/gedan/gedan'
				 })
				 
			},
			goGeDanDetail(resource){
						  console.log(resource)
						  uni.navigateTo({
						  	url: '../../other/gedanDetail/gedanDetail?resourceId='+ resource.resourceId,
							animationType: 'slide-in-right',
							animationDuration: 200
						  })
			},
			play(msg){
			  this.nowSong.id = msg.resourceId? msg.resourceId:null || msg.id
			  // console.log(msg)
				  // 获取音乐url
				  uni.request({
					url: "http://119.3.174.206:3000/song/url?id=" + this.nowSong.id,
					success: (res) => {
						console.log(res)
						if(!res.data.data[0].url)return console.log('权限不够')
						this.nowSong.url = res.data.data[0].url
						this.nowSong.playState = true
						this.nowSong.image =  msg.uiElement?msg.uiElement.image.imageUrl:null || msg.artists[0].img1v1Url
						this.nowSong.title =  msg.uiElement?msg.uiElement.mainTitle.title:null || msg.name
						this.nowSong.author = msg.uiElement?msg.resourceExtInfo.artists[0].name:null || msg.artists[0].name
						this.$store.commit('songChange', this.nowSong)
						this.iac.src = this.nowSong.url
						this.$play()
					}
				  })	  
			},
		},
		}

</script>

<style scoped lang="less">
	.tuijian-gedan-box {
		margin-bottom: 90rpx;
	}
	.jingxuan {
		position: relative;
		margin: 14rpx 0 0 0;
		// padding: 0 14rpx;
		.jingxuan-title {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			align-items: center;
			.title {font-size: 40rpx;}
			a {
				font-size: 20rpx; 
				line-height: 48rpx;
				border: 2rpx solid #ccc;
				padding: 0 10rpx;
				border-radius: 40rpx;
			}
		}
		.jingxuan-content {
			position: relative;
			margin-top: 10rpx;
			white-space: nowrap;
			width: 100%;
			height: 300rpx;
			// justify-content: space-between;
			// background-color: pink;
			
			.item {
				// top: 0;
				height: 100%;
				width: 30%;
				display: inline-block;
				// display: flex;
				margin-right: 30rpx;
				// background-color: yellow;
				// align-items: center;
				
				.xiex-image {
					height: 70%;
					width: 100%;
					border-radius: 20rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				easy-loadimage {
					height: 70%;
					width: 100%;
					border-radius: 10rpx;
				}
				.describe {
					position: absolute;
					bottom: 0;
					width: 230rpx;
					height: 74rpx;
					font-size: 24rpx;
					white-space: normal;
					line-height: 40rpx;
				}
			}
		}
		.jingxuan2-content {
			margin-top: 10rpx;
			white-space: nowrap;
			width: 100%;
			height: 300rpx;
			// flex-direction: column;
			// justify-content: space-between;
			.item {
				width: 100%;
				display: inline-block;
				// margin-top: 20rpx;
				.item2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex: 2 2 1;
					padding: 0 10rpx 20rpx 0;
					font-size: 20rpx;
					.xiex-image {
						height: 84rpx;
						width: 84rpx;
						margin-right: 20rpx;
						border-radius: 10rpx;
						overflow: hidden;
					}
					p {
						width: 30%;
						text-overflow:ellipsis;
						overflow: hidden;
					}
					.name {
						width: 40%;
						overflow: hidden;
						text-overflow:ellipsis;
					}
				}
			}
		}
	}
</style>
